.form {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 20px;
  padding: 15px;
}

@media screen and (max-width: 550px) {
  .form {
    grid-template-columns: auto;
    grid-gap: 15px;
  }
}

.form__input {
  border: solid 2px hsl(0, 0%, 94%);
  padding: 10px;
}

input:focus {
  border: solid 2px hsl(0, 0%, 100%);
  outline: solid 1px hsl(0, 0%, 0%);
}

@media screen and (max-width: 550px) {
  input:focus {
    border: solid 2px hsl(0, 0%, 100%);
    outline: solid 1px hsl(22, 100%, 56%);
  }
}

.form__button {
  color: white;
  background-color: hsl(180, 100%, 25%);
  border: none;
  padding: 10px;
  font-weight: 300;
  transition: 0.5s;
}

.form__button:hover {
  background-color: hsl(180, 100%, 30%);
  transform: scale(1.1);
  cursor: pointer;
}

@media screen and (max-width: 550px) {
  .form__button:hover {
    transform: scale(1.05);
  }
}

.form__button:active {
  background-color: hsl(180, 100%, 35%);
}